// 关住作用域，将构造函数和构造函数的原型对象放置于一个自调用函数中
(function(window,undefined){
    // 创建全局变量
    var ps = "absolute";
    // 创建一个构造函数，放置🐍的属性
    function Snake(option) {

    // 确定option是属性值  使用三元表达式选择
    option = option instanceof Object? option:{};
    // 确定蛇节的宽高属性
    this.width= option.width||20;
    this.height= option.height||20;
    // 确定蛇本身的属性（位置（x、y)，颜色，）及蛇移动的方向
    // 将多组自身属性值放在数组中
    this.body = [
        {x: 3,y: 2,color: "red"},
        {x: 2,y: 2,color: "blue"},
        {x: 1,y: 2,color: "blue"}
    ];
    // 蛇移动的方向 (top bottom left right)
    this.direction="right";
    // 创建一个新数组存储添加的元素
    this.arr = [];
    }
    // 添加一个元素渲染到页面上的方法
    Snake.prototype.render=function(stage){
        // 创建div元素,看数组情况生成对应个数的div
        // 循环遍历
        for(var i = 0, len=this.body.length;i<len;i++){
            // 每循环一次将body中的每一项(每一个对象)，存贮到一个变量中方便调取
            var piece=this.body[i];
            // 创建一个元素
            var ele = document.createElement("div");
            // 利用上述变量给元素添加样式
            ele.style.width=this.width + "px";
            ele.style.height=this.height + "px";
            ele.style.left=piece.x*this.width + "px";
            ele.style.top=piece.y*this.height + "px";
            ele.style.position=ps;
            ele.style.backgroundColor=piece.color;
            // 给父级添加这个元素
            stage.appendChild(ele);
            // 将数据存贮到空数组中
            this.arr.push(ele);
        }
    }
    // 让蛇开始运动的方法
    Snake.prototype.move=function(stage){
        // 蛇身每次运动时 后一个覆盖它的前面那一个
        // 利用for循环遍历，将每一个蛇身根据蛇的运动而变化
        // 定义开始之前的蛇身的长度
        // len=this.body.length
        for(var i = this.body.length-1;i>0;i--){
           this.body[i].x = this.body[i-1].x;
           this.body[i].y = this.body[i-1].y;  
        }
        // 定义蛇开始运动之前的蛇头位置
        var head= this.body[0];
        // 蛇头运动的方向的选择根据不同分支
        switch(this.direction){
            case "right":
                head.x +=1;
                break;
            case "left":
                head.x -=1;
                break;
            case "top":
                head.y -=1;
                break;
            case "bottom":
                head.y +=1;
                break;  
        }
    }
    // 删除前一次的蛇
    Snake.prototype.remove=function(stage){
    // 需要删除首先得有数据先存储数据(在前面的步骤中创建新元素并且村的数组中)
    // 删除html中的div(ele),ele的元素存在arr中，需要删除arr重的每一项
    for(var i = this.arr.length-1;i>=0;i--){
        stage.removeChild(this.arr[i]);
    }
    // 清空数组
    this.arr = [];
    }
    // 利用window对象暴露snake,因此函数可以给外部使用
    window.Snake = Snake;
})(window,undefined);


// // 内部测试
// // 获取元素
// var stage = document.getElementById("stage");
// // 生成实例
// var snake = new Snake();
// // 调用实例 
// snake.render(stage);